<template>
	<view class="mapview">
		<view class="topBar">
			<hx-navbar :background-color="navbarConfig.background" :fixed="true" :back="true" transparent="show" :color="navbarConfig.color"
			 :title="title">
			</hx-navbar>
		</view>
		<view class="map_container" :style="mapContBottom">
			<map class="map" id="map" :longitude="longitude" :latitude="latitude" scale="14" :markers="markers" @markertap="makertap"></map>
		</view>
		<view class="map_text" :style="mapTxtHeight">
			<view class="map_search">
				<input class="input" type="text" v-model="keyword" placeholder="请输入搜索地址" />
				<u-icon class="search" name="search" color="#ffffff" size="40" @tap="search"></u-icon>
			</view>
			<view @click="tabMarker(index)" class="uni-flex" v-for="(item, index) in textData" :key="index">
				<view class="uni-flex-item">
					<view class="h1 clamp">{{item.name}}</view>
					<view class="clamp">{{item.distance ? (item.distance > 1000 ? ((item.distance / 1000) + '公里') : (item.distance + '米')) : ''}}{{item.address != '' ? ('&nbsp;|&nbsp;' + item.address) : ''}}</view>
				</view>
			</view>
			<view class="map_input" v-if="show">
				<input class="input" type="text" v-model="address" placeholder="请输入详细地址" />
				<view class="map_btn">
					<u-button class="custom-style custom-style-plain" type="default" @tap="cancel">取消</u-button>
					<u-button class="custom-style" type="primary" @tap="confirm">确定</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import amap from "./amap-wx.js";
	export default {
		data() {
			return {
				title: '',
				amapPlugin: null,
				key: '3f1108636b62b925277b21e9f6349f41',
				show: false,
				keyword: '',
				type: '',
				address: '',
				markers: [],
				poisData: [],
				title: 'map',
				latitude: 36.400266,
				longitude: 118.879228,
				textData: [],
				mapContBottom: '',
				mapTxtHeight: ''
			}
		},
		onReady() {
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					this.longitude = res.longitude
					this.latitude = res.latitude
				}
			})
			this.amapPlugin = new amap.AMapWX({ //初始化
				key: this.key
			})
			
		},
		onLoad(option) {
			this.type = option.type
			if (this.type == 'send') {
				this.title = "选择发货地址"
			} else {
				this.title = "选择收货地址"
			}
		},
		methods: {
			search(e) {
				if (!this.keyword) {
					this.$api.msg('请输入关键词')
				} else {
					let params = {
						iconPathSelected: '/static/map_select.png',
						iconPath: '/static/map.png',
						success: data => {
							uni.hideLoading()
							if (data.markers.length > 0) {
								this.markers = data.markers
								this.poisData = data.poisData
								this.textData = data.poisData
								this.mapContBottom = 'bottom: 400upx'
								this.mapTxtHeight = 'height: 400upx'
							} else {
								uni.getLocation({
									type: 'gcj02',
									geocode: true,
									success: res => {
										this.latitude = res.latitude
										this.longitude = res.longitude
									},
									fail: res => {
										console.log(res)
									}
								})
								this.mapContBottom = 'bottom: 200upx'
								this.mapTxtHeight = 'height: 200upx'
								this.textData = [{
									name: '抱歉，未找到结果',
									address: '',
									distance: null
								}]
							}
						},
						fail: (info) => {
							uni.hideLoading()
							this.$api.msg(info.errMsg.split(',')[1])
						}
					}
					params.querykeywords = this.keyword
					uni.showLoading()
					this.amapPlugin.getPoiAround(params)
				}
			},
			makertap(e) {
				let id = e.detail.markerId;
				this.showMarkerInfo(id)
				this.changeMarkerColor(id)
			},
			changeMarkerColor(i) {
				if (this.textData[0].distance == null) {
					return
				}
				this.markers.forEach(item => {
					if (item.iconPath == "/static/map_select.png") {
						item.iconPath = "/static/map.png"
					}
				})
				this.markers[i].iconPath = "/static/map_select.png"
			},
			showMarkerInfo(i) {
				if (this.textData[0].distance == null) {
					return
				}
				this.show = true
				this.textData = [{
					name: this.poisData[i].name,
					location: this.poisData[i].location,
					address: this.poisData[i].address,
					distance: this.poisData[i].distance
				}]
			},
			tabMarker(e) {
				let id = e;
				if (this.show) {
					return
				}
				this.showMarkerInfo(id)
				this.changeMarkerColor(id)
			},
			cancel(e) {
				this.show = false
				this.textData = this.poisData
			},
			confirm(e) {
				let address = this.textData[0].name + ',' + this.address
				let point = this.textData[0].location
				if (this.type == 'send') {
					this.$api.prePage().sendData({
						address: address,
						point: point
					})
					uni.navigateBack()
				} else {
					this.$api.prePage().takeData({
						address: address,
						point: point
					})
					uni.navigateBack()
				}
			}
		}
	}
</script>
<style lang="less">
	page,
	.mapview {
		height: 100%;
	}

	.map_container {
		position: absolute;
		top: 0;
		top: calc(var(--status-bar-height) + 44px);
		bottom: 100upx;
		left: 0;
		right: 0;
	}

	.map {
		width: 750rpx;
		height: 100%;
	}

	.map_text {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100upx;
		font-size: 24upx;
		background: #fff;
		overflow-y: scroll;
	}

	.uni-flex {
		padding: 10upx 30upx;
		height: 100upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #3e5388;

		.h1 {
			margin-bottom: 5upx;
			font-size: 28upx;
		}
	}

	.map_search {
		display: flex;
		flex-wrap: nowrap;

		.input {
			padding: 20upx 30upx;
			width: 100%;
			font-size: 28upx;
			line-height: 60upx;
			height: 100upx;
			box-sizing: border-box;
			border-bottom: 1upx solid #3e5388;
		}

		.search {
			flex-shrink: 0;
			width: 100upx;
			height: 100upx;
			box-sizing: border-box;
			justify-content: center;
			background-color: #3e5388;
		}
	}

	.map_input {
		height: 300upx;

		.map_btn {
			padding: 20upx 30upx;
			display: flex;
			justify-content: center;
		}

		.input {
			padding: 20upx 30upx;
			font-size: 28upx;
			line-height: 60upx;
			height: 100upx;
			box-sizing: border-box;
			border-bottom: 1upx solid #3e5388;
		}

		.custom-style {
			margin: 40upx 20upx;
			width: 240upx;
		}
	}
</style>
